<template>
  <div class="maincontent unitSelection">
    <div class="maintitle">
      <div class="stepnumber">1</div>
      <div class="title">监理单位选取方式</div>
    </div>
    <el-form
      label-position="right"
      label-width="80px"
      :model="formData"
      ref="formData"
      :rules="formDataRules"
    >
      <div class="formcontent">
        <el-form-item label="选取方式" label-width="121px" prop="types">
          <el-select :disabled="disabled" v-model="formData.types" @change="selectValue">
            <el-option
              v-for="item in selcetType"
              :key="item.index"
              :label="item.methodName"
              :value="item.pickMethod"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-for="item in selcetType" :key="item.index">
          <el-form-item
            :label="item.pickDocument"
            label-width="121px"
            v-if="item.pickMethod==flag"
            prop="pickFileId"
          >
            <el-upload
              v-if="!disabled"
              class="upload-demo"
              :action="$config.uploadUrl"
              :file-list="fileList[0]"
              :before-upload="uploadBefore"
              :on-success="uploadTender"
              :limit="1"
              :disabled="disabled"
              accept=".pdf"
            >
              <el-button v-if="!disabled" size="small" type="primary">上传</el-button>
              <!-- <el-button @click="seePdf(0)" v-if="disabled" type="primary" size="small">查看</el-button> -->
            </el-upload>
            <seeFujianForList
              v-if="disabled && fileList[0]"
              @openPdf="seePdf"
              :file-obj="fileList[0]"
              :file-num="0"
            />
          </el-form-item>
        </div>
      </div>
      <div class="maintitle">
        <div class="stepnumber">2</div>
        <div class="title">监理单位名称</div>
      </div>
      <div class="formcontent">
        <el-form-item label="选择单位/公司" label-width="121px" prop="companyId">
          <el-select filterable :disabled="disabled" v-model="formData.companyId">
            <el-option
              v-for="item in companyList"
              :key="item.index_1"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-for="item in selcetType" :key="item.index">
          <el-form-item
            v-if="item.pickMethod==flag"
            :label="item.notifyDocument"
            label-width="121px"
            prop="notifyFileId"
          >
            <el-upload
              v-if="!disabled"
              class="upload-demo"
              :action="$config.uploadUrl"
              :file-list="fileList[1]"
              :before-upload="uploadBefore"
              :on-success="uploadUnit"
              :limit="1"
              :disabled="disabled"
              accept=".pdf"
            >
              <el-button v-if="!disabled" size="small" type="primary">上传</el-button>
              <!-- <el-button @click="seePdf(1)" v-if="disabled" type="primary" size="small">查看</el-button> -->
            </el-upload>
            <seeFujianForList
              v-if="disabled && fileList[1]"
              @openPdf="seePdf"
              :file-obj="fileList[1]"
              :file-num="1"
            />
          </el-form-item>
        </div>
      </div>
    </el-form>

    <div class="maintitle" style="margin-top:60px;">
      <div class="stepnumber" style="opacity:0.7;">3</div>
      <div class="title">合同信息</div>
    </div>
    <el-form
      label-width="110px"
      style="margin-top:30px"
      label-position="left"
      :model="formData"
      ref="formData_1"
      :rules="formDataRules"
    >
      <div class="formcontent">
        <el-form-item label="已签订的合同" label-width="118px" prop="contractFileId">
          <el-upload
            v-if="!disabled"
            class="upload-demo"
            :action="$config.uploadUrl"
            :file-list="fileList[2]"
            :before-upload="uploadBefore"
            :on-success="uploadContract"
            :limit="1"
            :disabled="disabled"
            accept=".pdf"
          >
            <el-button v-if="!disabled" size="small" type="primary">上传</el-button>
            <!-- <el-button @click="seePdf(2)" v-if="disabled" type="primary" size="small">查看</el-button> -->
          </el-upload>
          <seeFujianForList
            v-if="disabled && fileList[2]"
            @openPdf="seePdf"
            :file-obj="fileList[2]"
            :file-num="2"
          />
        </el-form-item>
      </div>
    </el-form>
    <div style="margin-top:40px;">
      <el-button v-if="!disabled" type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="back">返回</el-button>
    </div>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUnitSelection,
  SubmitUnitSelection,
  getSelectType,
  getCompany
} from "@/api/project1/implementationUnit/supervisionUnit.js";
import { validateNotNull, validateUpload } from "@/utils/validate.js";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      formData: {
        //施工单位选取方式
        projectId: localStorage.getItem("projectId"),
        pickMethod: null,
        pickFileId: null,
        companyId: null,
        notifyFileId: null,
        contractFileId: null,
        types: null
      },
      formDataRules: {
        types: [{ validator: validateNotNull, trigger: "change" }],
        pickFileId: [{ validator: validateUpload }],
        companyId: [{ validator: validateNotNull, trigger: "change" }],
        notifyFileId: [{ validator: validateUpload }],
        contractFileId: [{ validator: validateUpload }]
      },
      companyName: null,
      selcetType: [], //施工单位选取方式
      companyList: [], //公司名称
      flag: 0, //select value值
      fileList: [], //施工单位选取方式上传文件
      projectId: localStorage.getItem("projectId") || "",
      disabled: true,
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    this.getDetail();
  },
  methods: {
    //返回
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    },
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    //   //获取数据
    getDetail() {
      getUnitSelection({ projectId: this.projectId }).then(res => {
        if (res.code == 1000) {
          if (res.data) {
            this.flag = res.data.pickMethod;
            this.formData = res.data;
            this.formData.types = res.data.pickMethod;
            this.companyName = res.data.companyId;
            this.fileList.push(
              [
                {
                  name: res.data.pickFileInfo.fileName,
                  url: res.data.pickFileInfo.filePath
                }
              ],
              [
                {
                  name: res.data.notifyFileInfo.fileName,
                  url: res.data.notifyFileInfo.filePath
                }
              ],
              [
                {
                  name: res.data.contractFileInfo.fileName,
                  url: res.data.contractFileInfo.filePath
                }
              ]
            );
          }
        }
      });
      //获取选取方式
      getSelectType().then(res => {
        this.selcetType = res.data;
      });
      //获取公司名称
      getCompany().then(res => {
        this.companyList = res.data;
      });
    },
    //监听当前select选择看的Value属性
    selectValue: function(e) {
      this.flag = e;
      this.fileList = [];
    },
    //文件提交前
    uploadBefore: function(file) {
      var isTpye = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (isTpye != "pdf") {
        this.$message({
          showClose: true,
          message: "上传文件只能是pdf格式!",
          type: "error"
        });
        return false;
      }
    },
    //文件提交成功(施工单位选取方式文件)
    uploadTender: function(res) {
      if (res.code == 1000) {
        this.formData.pickFileId = res.data.id;
      }
    },
    //文件提交成功(施工单位名称文件)
    uploadUnit: function(res) {
      if (res.code == 1000) {
        this.formData.notifyFileId = res.data.id;
      }
    },
    //文件提交成功(合同文件)
    uploadContract: function(res) {
      if (res.code == 1000) {
        this.formData.contractFileId = res.data.id;
      }
    },

    //提交数据
    onSubmit: function() {
      let isTrue = false,
        isTrue1 = false;

      this.$refs["formData"].validate(valid => {
        if (valid) {
          isTrue = valid;
        }
      });
      this.$refs["formData_1"].validate(valid => {
        if (valid) {
          isTrue1 = valid;
        }
      });
      if (isTrue && isTrue1) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.formData.pickMethod = parseInt(this.formData.types);
        SubmitUnitSelection(this.formData)
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功",
              type: "success"
            });
            this.$router.push(
              "/projectManagement/projectImplementation/dealwith"
            );
          })
          .catch(err => {
            loading.close();
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.unitSelection {
  /deep/ .el-form--label-left .el-form-item__label {
    text-align: right;
  }
}
</style>
<style lang="scss" scoped>
.maincontent {
  padding: 20px 20px 0 20px;
  min-height: calc(100vh - 154px);
  box-sizing: border-box;
  background: #ffffff;
  padding: 20px;
  .maintitle {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    .stepnumber {
      width: 32px;
      height: 32px;
      background: #2e8ae6;
      text-align: center;
      line-height: 32px;
      border-radius: 100px;
      font-size: 18px;
      font-family: Helvetica;
      color: #ffffff;
    }
    .title {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      margin-left: 20px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }

  .formcontent {
    margin-top: 30px;
  }
}
.upload-demo {
  width: 18%;
}
</style>